<template>
  <PrintBox :printRow="printList" id="printBoxCheck">
    <template slot="title" slot-scope="scope">
      <div style="margin-bottom: 20px">验收设备记录表 STET/B/06-2</div>
    </template>
    <template slot-scope="scope">
      <!-- 表格  class  table-page  必须-->
      <table
        style="border-collapse: collapse"
        border="1"
        cellspacing="0"
        class="table-page"
        :isVertical="false"
      >
        <tr>
          <td colspan="2" style="width: 50mm">设备名称</td>
          <td colspan="2">{{ scope.item.deviceName }}</td>
          <td colspan="2" style="width: 50mm">规格型号</td>
          <td colspan="2" style="width: 50mm">{{ scope.item.spec }}</td>
        </tr>
        <tr>
          <td colspan="2" style="width: 50mm">设备数量</td>
          <td colspan="2" style="width: 50mm">{{ scope.item.num }}</td>
          <td colspan="2" style="width: 50mm">购置日期</td>
          <td colspan="2" style="width: 50mm">{{ scope.item.buyDate }}</td>
        </tr>
        <tr>
          <td colspan="2">生产厂家</td>
          <td colspan="2">{{ scope.item.manufacturer }}</td>
          <td colspan="2">出厂编号</td>
          <td colspan="2">{{ scope.item.code }}</td>
        </tr>
        <tr>
          <td colspan="2">出厂日期</td>
          <td colspan="2">{{ scope.item.outDate }}</td>
          <td colspan="2">验收日期</td>
          <td colspan="2">{{ scope.item.checkDate }}</td>
        </tr>
        <tr>
          <td rowspan="6" style="width: 10px">开箱记录</td>
          <td>包装外观</td>
          <td colspan="6">
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  :checked="scope.item.isPackage == 0"
                  type="checkbox"
                  n
                />完好
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="scope.item.isPackage == 1"
                />破损
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>设备外观</td>
          <td colspan="6">
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  :checked="scope.item.isDeviceAppearance == 0"
                  type="checkbox"
                  n
                />完好
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="scope.item.isDeviceAppearance == 1"
                />破损
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>产品合格证</td>
          <td colspan="6">
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  :checked="scope.item.isQualified == 0"
                  type="checkbox"
                  n
                />有
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="scope.item.isQualified == 1"
                />无
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>使用说明书</td>
          <td colspan="6">
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input :checked="scope.item.isUse == 0" type="checkbox" n />有
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input type="checkbox" :checked="scope.item.isUse == 1" />无
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>合同情况</td>
          <td colspan="6">
            <div style="display: flex; align-items: center">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  :checked="scope.item.isAgreement == 0"
                  type="checkbox"
                  n
                />符合
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 10mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="scope.item.isAgreement == 1"
                />不符合
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>补充说明</td>
          <td colspan="6" style="position: relative">
            <div style="position: absolute; top: 10px; left: 10px">
              {{ scope.item.remark }}
            </div>
          </td>
        </tr>
        <tr style="padding: 0; height: 40mm">
          <td style="padding: 0" colspan="2">安装调试情况</td>
          <td colspan="6" style="position: relative">
            <div style="position: absolute; top: 10px; left: 10px">
              {{ scope.item.info }}
            </div>
            <div style="position: absolute; bottom: 10px; right: 10px">
              <div
                style="
                  display: flex;
                  justify-content: flex-end;
                  text-align: left;
                "
              >
                <div style="width: 40mm; position: relative">
                  调试人：
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="$VUE_APP_IMG_API + scope.item.esign"
                  />
                </div>
                <div style="width: 40mm">
                  日期：{{ checkHistoryNode(scope, "start").endTime }}
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr style="padding: 0; height: 40mm">
          <td style="padding: 0" colspan="2">试运行情况</td>
          <td colspan="6" style="position: relative">
            <div
              style="
                position: absolute;
                top: 10px;
                left: 10px;
                text-align: left;
              "
            >
              <template v-if="CheckApprove(scope, 'syx').ShowMessage">
                {{ CheckApprove(scope, "syx").MessageText }}
              </template>
            </div>
            <div style="position: absolute; bottom: 10px; right: 10px">
              <div
                style="
                  display: flex;
                  justify-content: flex-end;
                  text-align: left;
                "
              >
                <div style="width: 40mm; position: relative">
                  部门负责人：
                  <template v-if="CheckApprove(scope, 'syx').ShowImg">
                    <img
                      style="width: 80px; position: absolute; top: -10px"
                      :src="CheckApprove(scope, 'syx').ApproveImg"
                    />
                  </template>
                </div>
                <div style="width: 40mm">
                  日期：{{ checkHistoryNode(scope, "syx").endTime }}
                </div>
              </div>
            </div>
          </td>
        </tr>
        <!-- <tr style="padding: 0;height:30mm">
            <td style="padding: 0" colspan="2">其他</td>
            <td colspan="6" style="position: relative">
              <div style="position: absolute;top: 10px;left:10px"></div>
            </td>
          </tr> -->
      </table>
      <!-- 底部信息位置 -->
      <div class="page-bottom" style="page-break-after: always">
        <div class="desc">注：本表格自2022年7月1日起生效</div>
      </div>
    </template>
  </PrintBox>
</template>
<script>
import printStyle from "@/utils/print.js";
import { deviceCheckInfo } from "@/api/device/deviceCheck.js";
export default {
  data() {
    return {
      printList: [],
      formData: {},
    };
  },
  methods: {
    getinfo(id) {
      return deviceCheckInfo(id).then((response) => {
        console.log(response.data);
        this.formData = response.data;
      });
    },

    async printBox(e) {
      await this.getinfo(e);
      //infos  勾选的数据 如果有勾选就打印勾选。
      this.printList = [this.formData];
      setTimeout(() => {
        document.title = "验收设备记录表 STET/B/06-2";
        this.$print({
          printable: "printBoxCheck", //打印区域id
          type: "html", //打印类型是html
          scanStyles: false,
          targetStyles: ["*"],
          style: this.workStyle(),
          onPrintDialogClose: () => {
            document.title = process.env.VUE_APP_TITLE;
          },
        });
      }, 500);
    },
    workStyle() {
      return `${printStyle}
        table,
        table tr th,
        table tr td {
          padding: 4px;
          height:53px
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
    },
  },
};
</script>
